<template>
  <div class="content" :style="contentStyle">
    <div
      class="article"
      v-for="(articleItem,index) in item.articles"
      :key="index"
      :style="articleStyle(articleItem)"
    ></div>
    <div v-if="!item.isFinish">
      <div
        class="picture"
        v-for="(pictureItem,pictureIndex) in item.pictures"
        :key="pictureIndex+100"
        :style="pictureStyle(pictureItem,pictureIndex)"
        @touchstart.stop="start(pictureItem,pictureIndex,$event)"
        @touchmove.stop="move(pictureItem,pictureIndex,$event)"
        @touchend.stop="end(pictureItem,pictureIndex,$event)"
      ></div>
    </div>
    <div class="targetBox" :style="targetStyle" v-if="!item.isFinish" ref="point"></div>
  </div>
</template>

<script>
import { mixins } from "@/common/mixins/assignmentMixins.js"
import Vue from "vue"
import {mapActions} from "vuex";
export default {
  mixins: [mixins],
  computed: {
    //背景图
    contentStyle() {
      const background = this.item.isFinish ? this.reallyBackground : this.item.background
      return {
        background: "url(" + background + ")0 0/100% 100%",
        transition: "all 3s"
      }
    },
    targetStyle() {
      const targetBox = this.item.targetBox
      return {
        position: "absolute",
        background: "url(" + targetBox.imageUrl + ")0 0/100% 100%",
        width: targetBox.width,
        height: targetBox.height,
        left: targetBox.left,
        top: targetBox.top
      }
    },
    reallyBackground() {
      return this.item.pictures.filter(item => { return item.isRight })[0].imageUrl
    },
    pictureStyle(pictureItem, index) {
      return function (pictureItem, index) {
        const x = pictureItem.moveX ? pictureItem.moveX : 0,
          y = pictureItem.moveY ? pictureItem.moveY : 0,
          right = 1 + index * 7
        return {
          background: "url(" + pictureItem.imageUrl + ")0 0/100% 100%",
          right: right + "rem",
          bottom: "1rem",
          transform: "translate3d(calc(var(--X) + " + x + "px),calc(var(--Y) + " + y + "px),0px)",
          transition: pictureItem.transition,
          zIndex: pictureItem.zIndex
        }
      }
    }
  },
  methods: {
    start: function (pictureItem, pictureIndex, event) {
      pictureItem.y = event.changedTouches[0].clientY
      pictureItem.x = event.changedTouches[0].clientX
      pictureItem.zIndex = 99
      Vue.set(this.item.pictures, pictureIndex, pictureItem)
    },
    move: function (pictureItem, pictureIndex, event) {
      pictureItem.transition = "all 0s"
      pictureItem.moveX = event.changedTouches[0].clientX - pictureItem.x
      pictureItem.moveY = event.changedTouches[0].clientY - pictureItem.y
      Vue.set(this.item.pictures, pictureIndex, pictureItem)
    },
    end: function (pictureItem, pictureIndex, event) {
      const x = event.changedTouches[0].clientX,
        y = event.changedTouches[0].clientY,
        minX = this.$refs.point.getBoundingClientRect().left,
        minY = this.$refs.point.getBoundingClientRect().top,
        maxX = minX + this.$refs.point.offsetWidth,
        maxY = minY + this.$refs.point.offsetHeight
      if (x >= minX && x <= maxX && y >= minY && y <= maxY && pictureItem.isRight) {
        this.sucMusic()
        if(this.isSeedEntery){
            this.setSucLottiePlay()
          setTimeout(()=>{
            this.updateAssignmentFinish({questionIndex:this.questionIndex,param:this.index})
          },3000)
          }else {
            this.perfectMusic()
          this.updateAssignmentFinish({questionIndex:this.questionIndex,param:this.index})
          }
        this.addAnswer({
          id: this.item.id,
          type: true
        })
      }
      else {
        this.losMusic()
        if(this.isSeedEntery){
            setTimeout(()=>{this.$emit('nextAssignment')},600)
          } else {
              this.$emit("losShow")
          }
        this.updateOperated({questionIndex:this.questionIndex,param:this.index})
        pictureItem.moveX = 0
        pictureItem.moveY = 0
        pictureItem.transition = "all 0.8s"
        pictureItem.zIndex = 98
        Vue.set(this.item.pictures, pictureIndex, pictureItem)
        this.addAnswer({
          id: this.item.id,
          type: false
        })
      }
    },
    ...mapActions("mainStatus", ["setLoading"]),
  }
}
</script>

<style scoped lang='stylus'>
@import '../../../common/stylus/content.styl'
.picture
  position absolute
  width 6rem
  height 4rem
  border 0.1rem solid white
  box-sizing border-box
  border-radius 0.5rem
  box-shadow 0px 0px 0.2rem gray
</style>
